<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HIT v.2</title>
<style type="text/css">
<!--
.groovybutton
{
   font-size:14px;
   font-family:Trebuchet MS,sans-serif;
   font-weight:bold;
   color:#FFFFFF;
   height:24px;
   background-color:#0077BB;
   border-style:none;
   margin: 5px;
}

.groovybutton2
{
   font-size:14px;
   font-family:Trebuchet MS,sans-serif;
   font-weight:bold;
   color:#FFFFFF;
   height:24px;
   background-color:#AA1100;
   border-style:none;
   margin: 5px;
}

body {
	font: 100%/1.4     "Comic Sans MS",		/* MS WebFont */
/* Fallback options */
    arial,			/* Windows, MacOS */
    helvetica,			/* Unix+X, MacOS */
    sans-serif;
	background: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-top: 10px;
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #42413C;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~ this fixed width container surrounds all other divs ~~ */
.container {
	width: 1080px;
	background: #EED;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	overflow: hidden; /* this declaration makes the .container understand where the floated columns within ends and contain them */
}

.sidebar1 {
	float: left;
	width: 200px;
	background: #EADCAE;
	padding-bottom: 10px;
	margin-top: 20px
}
.content {

	padding: 10px 0;
	width: 800px;
	float: left;
	margin-left: 10px;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
	border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 15px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	width: 180px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
	text-decoration: none;
	background: #C6D580;
}
/*
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
	background: #ADB96E;
	color: #FFF;
}
*/

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.selected {
	background: #ADB96E;
	color: #FFD;
}
-->
</style></head>

<body>

<script src="processing-1.3.6.min.js"></script>
<script type="application/processing" data-processing-target="canvas1">

PImage bigImage;
float[] bx = new float[10];
float[] by = new float[10];
int bs = 4;
boolean[] bover = new boolean[10];
boolean[] locked = new boolean[10];
for (int i=0; i<10; i++){
	bover[i] = false;
	locked[i] = false;	
}
float[] bdifx = new float[10]; 
float[] bdify = new float[10]; 
for (int i=0; i<10; i++){
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
}

void setup() 
{

  bigImage = requestImage(jsImage1);
  size(352, 240);

  for (int i=0; i<10; i++) { 
  	removePoint(i);
  }
  ellipseMode(CENTER_RADIUS);  
}

void updateSelf() 
{
	for (int i=0; i<10; i++) {
		bx[i] = jsx1[i];
		by[i] = jsy1[i];
	}
}

void flushAll()
{
	for (int i=0; i<10; i++) {
		removePoint(i);
	}
}

void removePoint(int idx) 
{
	bx[idx] = 0.0;
	by[idx] = 0.0;
	//bdifx[idx] = 0.0;
	//bdify[idx] = 0.0;
	free1[idx] = 1;
	jsx1[idx] = 0;
	jsy1[idx] = 0;
	bover[idx] = false;
}

void draw() 
{ 
  //updateSelf();
	//background(background_image);
  if (bigImage.width == 0) {
    // Image is not yet loaded
  } else if (bigImage.width == -1) {
    // This means an error occurred during image loading
  } else {
    // Image is ready to go, draw it
    background(bigImage);
  }
  if (jsFlush) {
  	flushAll();
	jsFlush = false;
  }
  
  // Test if the cursor is over any ellipse
  for (int i=0; i<10; i++) {
	  if (free1[i] == 0) {
		  if (mouseX > bx[i]-bs && mouseX < bx[i]+bs && 
			  mouseY > by[i]-bs && mouseY < by[i]+bs) {
			bover[i] = true;  
			if(!locked[i]) { 
			  stroke(0); 
			  //colorMode(RGB,255);
			  fill(255 - i*20,i*100%255,i*30%255);
			} 
		  } else {
			stroke(255);
			//colorMode(RGB,255);
			fill(255 - i*20,i*100%255,i*30%255);
			bover[i] = false;
		  }
		  
		  // drawing our shapes
		  ellipse(bx[i], by[i], bs, bs);
	  }

  }

}

void mousePressed() {
  boolean new_point = true;
  for (int i=0; i<10; i++) {
	  if(bover[i]) { 
	  	new_point = false;
	  	if (mouseButton == LEFT) {
			locked[i] = true;
			fill(255 - i*20,i*100%255,i*30%255);
		}
		else {
			removePoint(i);
		}
	  } else {
		locked[i] = false;
	  }
	
	  bdifx[i] = mouseX-bx[i]; 
	  bdify[i] = mouseY-by[i];
  }
  if (new_point == true && mouseButton == LEFT) {
  	idx = getFreeIdx();
	bx[idx] = mouseX;
	by[idx] = mouseY;
	free1[idx] = 0;
  }
}



void mouseDragged() {
  for (int i=0; i<10; i++) {
	  if(locked[i]) {
		bx[i] = mouseX-bdifx[i]; 
		by[i] = mouseY-bdify[i]; 
	  }
  }
  	  // updating js vars
	  updateJS();
}

void mouseReleased() {
  for (int i=0; i<10; i++) {
  	locked[i] = false;
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
  }
  updateJS();
}

void updateJS() {
  for (int i=0; i<10; i++) {
  	jsx1[i] = bx[i];
	jsy1[i] = by[i];
  }
}

void getFreeIdx() {
	for (int i=0; i<10; i++) {
		if (free1[i] == 1) {
			return i;
		}
	}
}

</script>

<script language="Javascript">
var cur_task_number = 1;
var no_person = false;
var no_bike = false;
var no_car = false;
var jsFlush = false;

// here is the imported js from our old HIT
var param_line = decode(gup('url'));
var params = new Array();
params = param_line.split(" ");

// disable the following line for actual HIT!!!
params[0] = "20100518_183535.jpg";

var jsImage1 = "http://amosweb.cse.wustl.edu/image/984/" + params[0];
var preview = 0;

var jsx1 = new Array();
var jsy1 = new Array();
var free1 = new Array();


for (i=0; i<10; i++) {
	jsx1[i] = 0;
	jsy1[i] = 0;
	free1[i] = 1;
}

function showTask(number) {
	jsFlush = true;
	setNavStyleUnselected(cur_task_number);
	cur_task_number = number;
	document.getElementById("task_title").innerHTML = document.getElementById("task"+number+"_title").innerHTML;

	document.getElementById("task_instructions").innerHTML = document.getElementById("task"+number+"_instructions").innerHTML;

	document.getElementById("task_response").innerHTML = document.getElementById("task"+number+"_response").innerHTML;
	if (number == 5) {
		document.getElementById("done").innerHTML = "Submit HIT";
	}
	else {
		document.getElementById("done").innerHTML = "I am done with this step";
	}
	setNavStyleSelected(number);
	
}

function setNavStyleSelected(number) {
	document.getElementById("nav"+number).style.background = "#ADB96E";
	document.getElementById("nav"+number).style.color = "#FFD";
}

function setNavStyleUnselected(number) {
	document.getElementById("nav"+number).style.background = "#C6D580";
	document.getElementById("nav"+number).style.color = "#42413C";
}

function saveResponse(task_number) {
	if (task_number == 1) {
		document.getElementById("people").value = "";
		document.getElementById("people").value = document.getElementById("coords1").value;
	}
	else if (task_number == 2) {
		document.getElementById("bikes").value = "";
		document.getElementById("bikes").value = document.getElementById("coords1").value;
	}
	else if (task_number == 3) {
		document.getElementById("cars").value = "";
		document.getElementById("cars").value = document.getElementById("coords1").value;
	}
	else if (task_number == 4) {
		response = document.getElementsByName("match");
		ret = "";
		for (i = 0; i < response.length; i++) {
			if (response.item(i).checked) {
				ret = response.item(i).value;
			}
		}
		document.getElementById("angle").value = "";
		document.getElementById("angle").value = ret;
	}
	else if (task_number == 5) {
		qs = ["weather", "timeofday", "season"];
		
		for (i = 0; i < qs.length; i++) {
			q = document.getElementsByName(qs[i] + "_q");
			ret = "";
			for(j = 0; j < q.length; j++) {
				cur_ans = q.item(j);
				if (cur_ans.checked) {
					ret = cur_ans.value;
				}
			}
			document.getElementById(qs[i]).value = "";
			document.getElementById(qs[i]).value = ret;
		}
	}
	
}

function done() {
	
	if (cur_task_number == 5) {
		qs = ["weather", "timeofday", "season"];
		for (i = 0; i < qs.length; i++) {
			q = document.getElementsByName(qs[i] + "_q");
			ret = "";
			for(j = 0; j < q.length; j++) {
				cur_ans = q.item(j);
				if (cur_ans.checked) {
					ret = cur_ans.value;
				}
			}
			if (ret == "") {
				alert("Please answer every question!");
				return;
			}
		}
		saveResponse(cur_task_number);
		submitHIT();
	}
	else if (cur_task_number == 4) {
		response = document.forms["response_form"].elements;
		if (! (response[0].checked || response[1].checked || response[2].checked)){
			alert("Must choose one of the angles!");
			return
		}
		saveResponse(cur_task_number);
		showTask(cur_task_number + 1);
	}
	else {
		// putting in the check for no response
		response = document.forms["response_form"].elements[0].checked;
		if (!response) {
			coords = document.getElementById("coords1").value;
			if (coords == ""){
				alert("You must provide a valid response!");
				return;
			}
		}
		saveResponse(cur_task_number);
		resetCanvas();
		showTask(cur_task_number+1);
	}
	
}

function submitHIT() {
	if (preview == 1) {
		ret = "";
		mturk_out = document.forms["mturk_form"].elements;
		for (i=0;i<mturk_out.length;i++) {
			ret += mturk_out[i].name + ": " + mturk_out[i].value;
			ret += "\n";
		}
		
		alert("Preview mode!\n" + ret);
	}
	else {
		document.forms["mturk_form"].submit();
	}
}

function reset() {
	// need code for resetting js values!!
	showTask(1);
	scroll(0,0);
}



function update1(){
	final = "";
	for (i=0; i<10; i++) {
		x = jsx1[i];
		y = jsy1[i];
		if ((x > 0) || (y > 0)) {
			final += " " + x + "," + y;
		}

	}
	document.getElementById("coords1").value = final;
}

function resetCanvas(){
	for (i=0; i<10; i++) {
		jsx1[i] = 0;
		jsy1[i] = 0;
		free1[i] = 1;
	}
	update1();
}

// functions for HIT input parsing
//
// This method Gets URL Parameters (GUP)
//
function gup( name )
{
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var tmpURL = window.location.href;
  var results = regex.exec( tmpURL );
  if( results == null )

    return "";
  else
    return results[1];
}

//
// This method decodes the query parameters that were URL-encoded
//
function decode(strToDecode)
{
  var encoded = strToDecode;
  return unescape(encoded.replace(/\+/g,  " "));
}

</script>


<div class="container">
  <div class="sidebar1">
    <ul class="nav">
    	<p>Complete the following five steps to finish the HIT:</p>
      <li><a id="nav1" href="#" >1. Find people</a></li>
      <li><a id="nav2" href="#" >2. Find bikes</a></li>
      <li><a id="nav3" href="#" >3. Find cars</a></li>
      <li><a id="nav4" href="#" >4. Match scenes</a></li>
      <li><a id="nav5" href="#" >5. Answer questions</a></li>
    </ul>
    <p></p>
 
    <!-- end .sidebar1 --></div>
  <div class="content">
    <div id="task_title">
    <h1>STEP 1: Find all the people in this scene</h1>
    </div>
    <div class="fltlft" id="canvas" style="border: 1px;border-style:solid;border-color:#999">
    <!--<img src="sample.jpg" width="352" height="240" alt="canvas" style="margin: 5px;" /> -->
    <div style="margin:5px;">
    	<canvas id="canvas1" onclick="javascript:update1()" onmousemove="javascript:update1()" > </canvas>
    </div>
    </div>
    <div class="fltlft" id="task_instructions" style="width:415px">
            	Instructions:
    	<ul>
        <li>Left-click to place a dot.</li>
        <li>Right-click on a dot to remove it.</li>
        <li>Drag a dot to move it around.</li>
        <li>Place just <u>one</u> dot per person.</li>
        <li>Try to place dot at the center of person.</li>
        <li>If there is no person, choose the answer below the image</li>
        </ul>
    </div>
    <div class="clearfloat"></div>
    <form id="response_form" action="">
    <div id="task_response">
        <input type="checkbox" id="no_person" name="no_person" value="" />There is no person in this scene.<br />
    </div>
    </form>
    <div class="clearfloat"></div>
    <div id="task_done">
    	<button type="button" id="done" class="groovybutton" onclick="javascript:done()">I am done with this step</button>
        <button type="button" id="reset" class="groovybutton2" onclick="javascript:reset()">Start over from step 1</button>
    </div>
    
      <form id="mturk_form" name="mturk_form" method="POST" action="http://www.mturk.com/mturk/externalSubmit">
<input type="hidden" id="assignmentId" name="assignmentId" value="">
<input type="hidden" id="img_name" name="img_name" value="" />
<input type="hidden" id="people" name="people" value="" />
<input type="hidden" id="bikes" name="bikes" value="" />
<input type="hidden" id="cars" name="cars" value="" />
<input type="hidden" id="angle" name="angle" value="" />
<input type="hidden" id="weather" name="weather" value="" />
<input type="hidden" id="timeofday" name="timeofday" value="" />
<input type="hidden" id="season" name="season" value="" />

	</form>
    <input type="text" id="coords1" value="" />

</div>
  <!-- end .container -->

  </div>
  


  
<div id="hidden" style="visibility:hidden;">

<div id="task1">
	<div id="task1_title">
    <h1>STEP 1: Find all the people in this scene</h1>
    </div>
    <div id="task1_instructions">
        	Instructions:
    	<ul>
        <li>Left-click to place a dot.</li>
        <li>Right-click on a dot to remove it.</li>
        <li>Drag a dot to move it around.</li>
        <li>Place just <u>one</u> dot per person.</li>
        <li>Try to place dot at the center of person.</li>
        <li>If there is no person, choose the answer below the image</li>
        </ul>
    </div>
    <div id="task1_response">
    <input type="checkbox" id="no_person" name="no_person" /><label for="no_person">There is no person in this scene.</label><br />
    </div>
</div>

<div id="task2">
	<div id="task2_title">
    <h1>STEP 2: Find all the bikes in the scene</h1>
    </div>
    <div id="task2_instructions">
            Instructions:
    	<ul>
        <li>Left-click to place a dot.</li>
        <li>Right-click on a dot to remove it.</li>
        <li>Drag a dot to move it around.</li>
        <li>Place just <u>one</u> dot per bike.</li>
        <li>Try to place dot at the center of a bike.</li>
        <li>If there is no person, choose the answer below the image</li>
        </ul>
    </div>
    <div id="task2_response">
 	<input type="checkbox" id="no_bike" name="no_bike" /><label for="no_bike">There is no bike in this scene.</label><br />
    </div>
</div>

<div id="task3">
	<div id="task3_title">
    <h1>STEP 3: Find all the cars in the scene</h1>
    </div>
    <div id="task3_instructions">
                Instructions:
    	<ul>
        <li>Left-click to place a dot.</li>
        <li>Right-click on a dot to remove it.</li>
        <li>Drag a dot to move it around.</li>
        <li>Place just <u>one</u> dot per car.</li>
        <li>Try to place dot at the center of a car.</li>
        </ul>
    </div>
    <div id="task3_response">
     <input type="checkbox" id="no_car" name="no_car" /><label for="no_car">There is no car in this scene.</label><br />
    </div>
</div>

<div id="task4">
	<div id="task4_title">
    <h1>STEP 4: Match scene to one of three options</h1>
    </div>
    <div id="task4_instructions">
    	Instructions:
        <p>The scene in the image to the left is very similar (or the same) one of the scenes below it. The image is taken at a different time or day, and the camera might be slightly adjusted. Determine which one most resembles the left image, and select it (by clicking the image or the radio button above it).</p>
    </div>
    <div id="task4_response">
    <table>
    	<tr>
        	<td>
            	<div align="center"><input type="radio" name="match" value="1" id="angle1"/></div>
            </td>
            <td>
            	<div align="center"><input type="radio" name="match" value="2" id="angle2"/></div>
            </td>
            <td>
            	<div align="center"><input type="radio" name="match" value="3" id="angle3"/></div>
            </td>
        </tr>
        <tr>
        	<td>
            	<label for="angle1"><img src="angle1.jpg" style="width: 240px;" /></label>
            </td>
            <td>
            	<label for="angle2"><img src="angle2.jpg" style="width: 240px;"/></label>
            </td>
            <td>
            	<label for="angle3"><img src="angle3.jpg" style="width: 240px;"/></label>
            </td>
        </tr>

    </table>
    </div>
</div>

<div id="task5">
	<div id="task5_title">
    <h1>STEP 5: Answer some simple questions</h1>
    </div>
    <div id="task5_instructions">
    	Instructions:
        <p>Please answer a few simple questions regarding the scene in the image. Each question has exactly one correct answer, choose the most appropriate from the choices presented. </p>
        <p>This is the last step of the HIT, clicking "Submit HIT" will submit and complete your HIT.</p>
    </div>
    <div id="task5_response">
    <p><u>QUESTION 1</u>: What is the weather in the scene?</p>
    <input type="radio" name="weather_q" value="sunny" id="sunny"/><label for="sunny">Sunny </label>
    <input type="radio" name="weather_q" value="rainy" id="rainy"/><label for="rainy">Rainy </label>
    <input type="radio" name="weather_q" value="snowy" id="snowy"/><label for="snowy">Snowy </label>
    <br /><br />
    <p><u>QUESTION 2</u>: What time of day is the picture showing?</p>
    <input type="radio" name="timeofday_q" value="day" id="day"/><label for="day">Day time </label>
    <input type="radio" name="timeofday_q" value="night" id="night"/><label for="night">Night time </label>
    <input type="radio" name="timeofday_q" value="duskdawn" id="duskdawn"/><label for="duskdawn">Dusk or dawn </label>
    <br /><br />
    <p><u>QUESTION 3</u>: What season of the year is the picture showing?</p>
    <input type="radio" name="season_q" value="spring" id="spring"/><label for="spring">Spring </label>
    <input type="radio" name="season_q" value="summer" id="summer"/><label for="summer">Summer </label>
    <input type="radio" name="season_q" value="fall" id="fall"/><label for="fall">Fall </label>
    <input type="radio" name="season_q" value="winter" id="winter"/><label for="winter">Winter </label>
    <br /><br />
    </div>
</div>


  
</div>



<script language="Javascript">

showTask(1);

document.getElementById("img_name").value = params[0];
document.getElementById('assignmentId').value = gup('assignmentId');
	
	//
    // Check if the worker is PREVIEWING the HIT or if they've ACCEPTED the HIT
    //
    if ( (gup('assignmentId') == "ASSIGNMENT_ID_NOT_AVAILABLE") || (gup('assignmentId') == "") )
    {
  		//document.getElementById('done').disabled = true;
  		preview = 1;
    } else {
		preview = 0;
        var form = document.getElementById('mturk_form');
        if (document.referrer && ( document.referrer.indexOf('workersandbox') != -1) ) {
            form.action = "http://workersandbox.mturk.com/mturk/externalSubmit";
        }
    }

</script>
</body>
</html>
